import {Component} from 'react'
import {View, ScrollView} from '@tarojs/components'
import {AtList, AtSearchBar, AtListItem, AtAccordion} from 'taro-ui'
import './index.less'
import './index.config'
import Hospital from "./hospital"

class Index extends Component {

  constructor() {
    super(...arguments)
    this.state = {
      value: '',
      open: false
    }
  }

  onChange(value) {
    this.setState({
      value: value
    })
  }

  handleClick(value) {
    this.setState({
      open: value
    })
  }
  onScrollToLower() {}


  render() {
    const scrollStyle = {
      height: '630px'
    }
    const Threshold = 150
    const hospitalStyle = {
      height: '31rem',
      'background-color': 'rgb(26, 173, 25)'
    }
    return (
      <View className='index'>
        <AtSearchBar
          placeholder='搜索国医堂'
          actionName='搜索'
          value={this.state.value}
          onChange={this.onChange.bind(this)}
          className='search-input'
        />
        <View>
          <View className='condition-layout'>
            <View className='condition-item'>
              <view>
                <text>医院：</text>
              </view>
            </View>
            <View>
              <View className='vertical-divider'></View>
            </View>
            <View className='condition-select'>
              <AtAccordion
                title='筛选'
                onClick={this.handleClick.bind(this)}
                open={this.state.open}
                className='selected-btn'
              >
                <AtList hasBorder={false}>
                  <AtListItem
                    title='评分'
                    thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                  />
                  <AtListItem
                    title='剩余量'
                    thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
                  />
                </AtList>
              </AtAccordion>
            </View>
          </View>
          <View className='level-divider'></View>
        </View>
        <ScrollView
          scrollY
          scrollWithAnimation
          scrollTop={0}
          style={scrollStyle}
          lowerThreshold={Threshold}
          upperThreshold={Threshold}
          onScrollToLower={this.onScrollToLower.bind(this)}
        >
          <Hospital style={hospitalStyle} />
        </ScrollView>
      </View>
    )
  }
}

export default Index

